<template>
<div class='footer-wrapper'>

  <router-link to="/index" tag='div' class="item" active-class='act'>
    <i class='iconfont icon-changyonglogo40'></i>
    <span>外卖</span>
  </router-link>

  <router-link to="/discovery" tag='div' class="item " active-class='act'>
    <i class='iconfont icon-faxian'></i>
    <span>发现</span>
  </router-link>
  <router-link to="/order" tag='div' class="item " active-class='act'>
    <i class='iconfont icon-icon'></i>
    <span>订单</span>
  </router-link>
  <router-link to="/mine" tag='div' class="item " active-class='act'>
    <i class='iconfont icon-wode'></i>
    <span>我的</span>
  </router-link>
</div>
</template>
<script>
export default {
  name: "",
  data: () => ({

  })
}
</script>
<style lang="less">
@import "../../static/less/var.less";

.footer-wrapper {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: @base*100rem;
    display: flex;
    text-align: center;
    background-color: #ffffff;
    border-top: 1px solid @bc1;
    .item {
        display: flex;
        flex-direction: column;
        width: 25%;
        height: 100%;
        padding-top: @base*20rem;
        color: @fc1;
        i {
            font-size: @base*32rem;
        }
        span {
            font-size: @base*24rem;
        }
    }
    .act {
        color: @mc;
    }

}
</style>
